<template>
  <el-table :data="tableData" style="width: 100%" height="100%">
    <el-table-column type="expand">
      <template slot-scope="props">
        <el-form label-position="left" inline class="demo-table-expand"  style="display:flex">
          <div v-for="it in props.row.realTimeData">
            <el-card class="box-card">
              <el-form-item label="模拟量名称">
                <span>{{ it.dataName }}</span>
              </el-form-item>
              <el-form-item label="实时数据">
                <span>{{ it.dataValue }}</span>
              </el-form-item>
              <el-form-item label="是否报警">
                <span>{{ it.isAlarm ? "是" : "否" }}</span>
              </el-form-item>
              <el-form-item label="报警信息">
                <span>{{ it.alarmMsg == "" ? "无" : it.alarmMsg }}</span>
              </el-form-item>
            </el-card>
          </div>
        </el-form>
      </template>
    </el-table-column>
    <el-table-column label="设备与组编号" prop="groupId" align="center">
    </el-table-column>
    <el-table-column label="设备名称" prop="deviceName" align="center">
    </el-table-column>
    <el-table-column label="设备地址" prop="deviceAddr" align="center">
    </el-table-column>
    <el-table-column label="节点编号" prop="nodeID" align="center">
    </el-table-column>
    <el-table-column label="设备运行状态" prop="deviceStatus" align="center">
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
    };
  },
  methods: {},
  mounted() {
    this.$axios
      .get("/app/GetDeviceData", {
        headers: {
          userId: "176"
        },
        params: {
          groupId: ""
        }
      })
      .then((res) => {
        this.tableData = res.data.data;
        // this.tableData.
        console.log("实时数据", this.tableData);
      });
  },
};
</script>

<style lang="less" scoped>
.el-table-column {
  cursor: none;
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.box-card {
  width: 200px;
}
</style>